<script setup lang="ts">
</script>

<template>
  <scroll-view scroll-y class="scroll-view" refresher-enabled>
    <view class="all-box">
      <view v-for="index in 10" :key="index">
        <view class="list-box" :style="{ marginTop: index === 1 ? '56rpx' : '40rpx' }" hover-class="my-list-box">
          <view class="title-date">2024.05.07</view>
          <text class="ze1">政策标题：xxxxxxxxxxxxxxxxx</text>
          <text class="ze-title">政策正文：xxxxxxxxxxxxxxxxxxxxxxxxxxxx</text>
          <navigator url="/pages/" open-type="navigate" hover-class="navigator-hover" class="ch">
            <view class="ch1">查看详情</view>
            <uni-icons type="right" color="#F2BB16" size="15" top="0"></uni-icons>
          </navigator>
        </view>
      </view>
    </view>
  </scroll-view>
  <view class="bottom-box">
    <image src="/static/images/编组.png" mode="scaleToFill" class="img" />
  </view>
</template>

<style lang="scss">
page {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}

.all-box {
  display: flex;
  margin: 0 58rpx;
  height: 1456rpx;
  background: #ffffff;
  flex-direction: column;

  .list-box {
    display: flex;
    margin-top: 56rpx;
    height: 248rpx;
    background: #f0f0f0;
    border-radius: 30rpx;
    flex-direction: column;

    .title-date {
      display: flex;
      margin-top: 32rpx;
      margin-left: 20rpx;
      width: 202rpx;
      height: 42rpx;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC-500;
      font-weight: 500;
      text-align: CENTER;
      color: #ffffff;
      line-height: 38rpx;
      text-shadow: 2rpx 14rpx 48.6rpx 0rpx rgba(245, 209, 100, 0.61);
    }

    .ze1 {
      display: flex;
      margin-top: 16rpx;
      margin-left: 20rpx;
      width: 556rpx;
      height: 50rpx;
      font-size: 32rpx;
      font-family: Inter, Inter-700;
      font-weight: 700;
      text-align: LEFT;
      color: #333333;
      line-height: 44rpx;
      letter-spacing: 0.12rpx;
      text-shadow: 2rpx 14rpx 48.6rpx 0rpx rgba(245, 209, 100, 0.61);
    }

    .ze-title {
      display: flex;
      margin-top: 4rpx;
      margin-left: 20rpx;
      width: 556rpx;
      height: 50rpx;
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-500;
      font-weight: 500;
      text-align: LEFT;
      color: #333333;
      line-height: 36rpx;
      letter-spacing: 0.1rpx;
    }

    .ch {
      display: flex;
      height: 30rpx;
      width: 120rpx;
      margin-left: 500rpx;
      justify-content: flex-end;

      .ch1 {
        display: flex;
        margin-top: 1rpx;
        // width: 90rpx;
        // height: 26rpx;
        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #f2bb16;
        line-height: 30rpx;

      }
    }
  }

  .my-list-box {
    background: #f1bb15;
    border-radius: 30rpx;
    box-shadow: 2rpx 14rpx 48.6rpx 0rpx rgba(245, 209, 100, 0.61);
  }
}

.bottom-box {
  position: absolute;
  bottom: auto;
  display: flex;
  left: auto;
  // top: 1152rpx;
  bottom: 0;
  width: 750rpx;
  height: 68rpx;
  z-index: 999;

  .img {
    position: absolute;
    bottom: auto;
    display: flex;
    left: auto;
    // top: 1152rpx;
    bottom: 0;
    width: 750rpx;
    height: 68rpx;
    z-index: 999;
  }
}
</style>